<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2023/9/27
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">


    <el-input v-model="goodsname" placeholder="键盘名" style="width: 15%"></el-input>
    <el-select v-model="searchKeyCapList" clearable placeholder="--请选择键帽类型--" style="width: 15%">
        <el-option
                v-for="item in keyCapList"
                :key="item.keycapid"
                :label="item.keycapname"
                :value="item.keycapid">
        </el-option>
    </el-select>
    <el-select v-model="searchKeyBoardColorList" clearable placeholder="--请选择键盘颜色--" style="width: 15%">
        <el-option
                v-for="item in keyBoardColorList"
                :key="item.keyboardcolorid"
                :label="item.keyboardcolorname"
                :value="item.keyboardcolorid">
        </el-option>
    </el-select>
    <el-select v-model="searchShaftChooseList" clearable placeholder="--请选择轴体选择--" style="width: 15%">
        <el-option
                v-for="item in shaftChooseList"
                :key="item.shaftchooseid"
                :label="item.shaftchoose"
                :value="item.shaftchooseid">
        </el-option>
    </el-select>
    <el-select v-model="searchBackLightColorList" clearable placeholder="--请选择背光颜色--" style="width: 15%">
        <el-option
                v-for="item in backLightColorList"
                :key="item.backlightcolorid"
                :label="item.backlightcolorname"
                :value="item.backlightcolorid">
        </el-option>
    </el-select>
    <el-select v-model="searchBranchList" clearable placeholder="--请选择分店--" style="width: 15%">
        <el-option
                v-for="item in branchList"
                :key="item.branchid"
                :label="item.branchname"
                :value="item.branchid"
                v-if="staffBranchid==12138||staffBranchid==item.branchid">
        </el-option>
    </el-select>
    <el-button
            type="primary"
            @click="search()">查询
    </el-button>
    <br><br>
    <el-button size="mini" type="primary" @click="addDialog()" v-if="staffBranchid==12138">添加</el-button>


    <el-table
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            style="width: 100%">

        <el-table-column
                fixed

                label="商品图片"
                width="220px"
                height="80px"
        >
            <template slot-scope="scope">
                <%--                </el-button>--%>
                <el-image
                        style="width: 220px;height: 80px;"
                        :src="scope.row.goods.url"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="goods.goodsname"
                label="商品名称"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.layout"
                label="键盘布局"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="keyCap.keycapname"
                label="键帽材质"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="keyBoardColor.keyboardcolorname"
                label="键盘颜色"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.shafttype"
                label="轴体类型"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="shaftChoose.shaftchoose"
                label="轴体选择"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.interfacetype"
                label="接口类型"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="backLightColor.backlightcolorname"
                label="背光颜色"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.cprice"
                label="商品进价"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.sprice"
                label="商品售价"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店铺名称"
                width="220px"
        >
        </el-table-column>
        <el-table-column
                prop="counts"
                label="商品数量"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="150">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="editDialog(scope.row)" v-if="staffBranchid==12138">编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <!--修改的对话框
     visible.sync：控制对话框的显示true和隐藏false
 -->
    <el-dialog
            title="修改信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="editDialogClose"
    >

        <el-form ref="editForm" :model="editForm" label-width="80px">

            <el-form-item label="添加图片" prop="url" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        :limit="1"
                        action="fakeaction"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="true"
                        :http-request="setUrl"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过50Mb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品名称" prop="goods.goodsname" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.goodsname" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局" prop="goods.layout" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.layout" placeholder="请输入键盘布局"></el-input>
            </el-form-item>
            <el-form-item label="键帽类型" prop="goods.keycapid" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="editForm.goods.keycapid" placeholder="--键帽类型--">
                    <el-option
                            v-for="item in keyCapList"
                            :key="item.keycapid"
                            :label="item.keycapname"
                            :value="item.keycapid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色" prop="keyboardcolorid"
                          :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="editForm.goods.keyboardcolorid" placeholder="--键盘颜色--">
                    <el-option
                            v-for="item in keyBoardColorList"
                            :key="item.keyboardcolorid"
                            :label="item.keyboardcolorname"
                            :value="item.keyboardcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体类型" prop="goods.shafttype" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.shafttype" placeholder="请输入轴体类型"></el-input>
            </el-form-item>
            <el-form-item label="轴体选择" prop="goods.shaftchooseid" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="editForm.goods.shaftchooseid" placeholder="--轴体选择--">
                    <el-option
                            v-for="item in shaftChooseList"
                            :key="item.shaftchooseid"
                            :label="item.shaftchoose"
                            :value="item.shaftchooseid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口类型" prop="goods.interfacetype" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.interfacetype" placeholder="请输入接口类型"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色" prop="backlightcolorid"
                          :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="editForm.goods.backlightcolorid" placeholder="--背光颜色--">
                    <el-option
                            v-for="item in backLightColorList"
                            :key="item.backlightcolorid"
                            :label="item.backlightcolorname"
                            :value="item.backlightcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进价" prop="goods.cprice" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.cprice" placeholder="请输入商品进价"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="goods.sprice" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="editForm.goods.sprice" placeholder="请输入商品售价"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="goods.state" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="editForm.goods.state" placeholder="--状态--">
                    <el-option
                            :key="editForm.goods.state"
                            label="下架状态"
                            :value="editForm.goods.state">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogClose">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate('editForm')">确 定</el-button>
              </span>
    </el-dialog>


    <!--添加的对话框
             visible.sync：控制对话框的显示true和隐藏false
         -->
    <el-dialog
            title="新增商品"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="addDialogClose"
    >
        <el-form ref="addForm" :model="addForm" label-width="80px">

            <el-form-item label="添加图片" prop="url" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        :limit="1"
                        action="fakeaction"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="true"
                        :http-request="setUrl"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过50Mb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname"
                          :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.goodsname" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局" prop="layout" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.layout" placeholder="请输入键盘布局"></el-input>
            </el-form-item>
            <el-form-item label="键帽类型" prop="keycapid" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="addForm.keycapid" placeholder="--键帽类型--">
                    <el-option
                            v-for="item in keyCapList"
                            :key="item.keycapid"
                            :label="item.keycapname"
                            :value="item.keycapid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色" prop="keyboardcolorid"
                          :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="addForm.keyboardcolorid" placeholder="--键盘颜色--">
                    <el-option
                            v-for="item in keyBoardColorList"
                            :key="item.keyboardcolorid"
                            :label="item.keyboardcolorname"
                            :value="item.keyboardcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体类型" prop="shafttype" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.shafttype" placeholder="请输入轴体类型"></el-input>
            </el-form-item>
            <el-form-item label="轴体选择" prop="shaftchooseid" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="addForm.shaftchooseid" placeholder="--轴体选择--">
                    <el-option
                            v-for="item in shaftChooseList"
                            :key="item.shaftchooseid"
                            :label="item.shaftchoose"
                            :value="item.shaftchooseid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口类型" prop="interfacetype" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.interfacetype" placeholder="请输入接口类型"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色" prop="backlightcolorid"
                          :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="addForm.backlightcolorid" placeholder="--背光颜色--">
                    <el-option
                            v-for="item in backLightColorList"
                            :key="item.backlightcolorid"
                            :label="item.backlightcolorname"
                            :value="item.backlightcolorid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进价" prop="cprice" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.cprice" placeholder="请输入商品进价" @change="checkprice"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" prop="sprice" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-input v-model="addForm.sprice" placeholder="请输入商品售价" @change="checkprice"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="state" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                <el-select v-model="addForm.state" placeholder="--状态--">
                    <el-option
                            key="0"
                            label="下架状态"
                            value="0">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogClose">取 消</el-button>
                <el-button type="primary" @click="confirmAdd('addForm')">确 定</el-button>
              </span>
    </el-dialog>


</div>


<script>

    let app = new Vue({
        el: "#app",
        data: {
            //获取登录用户的分店id
            staffBranchid: "",
            //分页数据
            currentPage: 1,
            pageSize: 5,
            total: null,
            //表格数据
            tableData: [],
            //控制修改对话框
            dialogVisible: false,
            //修改表单对象
            editForm: {
                goods: {}
            },
            //控制修改对话框
            dialogVisible2: false,
            //添加表单对象
            addForm: {},
            //搜索框的值
            keyboardcolorid: "",
            keyboardcolorname: "",
            //存放上传文件
            fileList: [],
            //下拉框集合
            keyCapList: [],
            keyBoardColorList: [],
            shaftChooseList: [],
            backLightColorList: [],
            branchList: [],

            //搜索栏的值
            goodsname: "",
            searchKeyCapList: "",
            searchKeyBoardColorList: "",
            searchShaftChooseList: "",
            searchBackLightColorList: "",
            searchBranchList: ""

        },
        created() {
            //获取登录用户的分店id
            this.staffBranchid = ${staff.branchid};

            this.initTable();
            this.searchKeyCap();
            this.searchKeyBoardColor();
            this.searchShaftChoose();
            this.searchBackLightColor();
            this.searchBranch();
        },
        methods: {
            initTable() {
                axios.get("/goods/allGoods?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize+ "&staffBranchid=" + this.staffBranchid).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                // this.initTable()
                this.search()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                // this.initTable()
                this.search(val)
            },
            //修改按钮事件
            editDialog(row) {
                this.dialogVisible = true;
                this.editForm = JSON.parse(JSON.stringify(row));
            },
            //确认修改按钮事件
            confirmUpdate() {
                axios.post("/goods/updGoods", this.editForm.goods).then(resp => {
                    //刷新页面
                    this.initTable();
                    //关闭对话框
                    this.dialogVisible = false;
                })
            },
            //更新弹窗关闭事件
            editDialogClose() {
                this.handleRemove();
                this.$refs.upload.clearFiles();
                this.dialogVisible = false
            },
            //添加按钮事件
            addDialog() {
                this.dialogVisible2 = true;
            },
            //确认添加按钮事件
            confirmAdd(addForm) {
                //通过validate 判断所填内容是否为空
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        axios.post("/goods/addGoods", this.addForm).then(resp => {
                            //刷新页面
                            this.initTable();
                            //关闭对话框
                            this.dialogVisible2 = false;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //添加弹窗关闭事件
            addDialogClose() {
                this.handleRemove();
                this.$refs.upload.clearFiles();
                this.dialogVisible2 = false
                this.$refs.addForm.resetFields()
            },
            handleDelete(val) {

                this.$confirm("真的删除该商品吗？", "信息", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    if (val.counts == 0) {
                        axios.get("/goods/delBranchGoods?id=" + val.id).then(resq => {
                            this.initTable()
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        })
                    } else {
                        this.$message({
                            message: '该商品还有库存,无法删除！',
                            type: 'warning'
                        });
                    }
                }).catch(() => {

                });


            },
            //根据条件查询
            search(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }
                axios.get("/goods/searchGoods?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&goodsname=" + this.goodsname + "&searchKeyCapList=" + this.searchKeyCapList + "&searchKeyBoardColorList=" + this.searchKeyBoardColorList + "&searchShaftChooseList=" + this.searchShaftChooseList + "&searchBackLightColorList=" + this.searchBackLightColorList + "&searchBranchList=" + this.searchBranchList).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },
            <%--
            --  添加的图片上传
            --%>
            // 取消上传，删除已经上传的图片
            handleRemove() {
                if (this.addForm.url != null && this.addForm.url != '') {
                    const form = new FormData();
                    // 文件地址
                    form.append("identificationPhoto", this.addForm.url);
                    axios.post("/goods/imgdelete", form).then(res => {
                        this.addForm.url = "";
                    })
                }
                if (this.editForm.goods.url != null && this.editForm.goods.url != '') {
                    const form = new FormData();
                    // 文件地址
                    form.append("identificationPhoto", this.editForm.goods.url);
                    axios.post("/goods/imgdelete", form).then(res => {
                        this.editForm.goods.url = "";
                    })
                }
            },
            handlePreview(file) {
                console.log(file);
            },
            //上传图片
            setUrl(params) {
                const file = params.file;
                // 根据后台需求数据格式
                const form = new FormData();
                // 文件对象
                form.append("file", file);

                axios.post("/goods/imgup", form).then(res => {
                    this.addForm.url = res.data.data;
                    this.editForm.goods.url = res.data.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            /**
             * 获取下拉框所需的数据
             * **/
            searchKeyCap() {
                axios.post("/goods/searchKeyCap").then(resp => {
                    this.keyCapList = resp.data.data
                })
            },
            searchKeyBoardColor() {
                axios.post("/goods/searchKeyBoardColor").then(resp => {
                    this.keyBoardColorList = resp.data.data
                })
            },
            searchShaftChoose() {
                axios.post("/goods/searchShaftChoose").then(resp => {
                    this.shaftChooseList = resp.data.data
                })
            },
            searchBackLightColor() {
                axios.post("/goods/searchBackLightColor").then(resp => {
                    this.backLightColorList = resp.data.data
                })
            },
            searchBranch() {
                axios.post("/goods/searchBranch").then(resp => {
                    console.log(resp)
                    this.branchList = resp.data.data
                })
            },


            /**
             * 检查添加时的售价，太低则输出提示
             * **/
            checkprice(){
                //判断进价和售价非空
                if(this.addForm.cprice!=null&&this.addForm.cprice!=""&&this.addForm.sprice!=null&&this.addForm.sprice!=""){
                    if(this.addForm.sprice<this.addForm.cprice){
                        this.$message({
                            message: '亏本大甩卖',
                            type: 'info'
                        });
                    }
                }
            }


        }
    })


</script>

</body>

</html>
